import ListEmptyNone from '@/components/antd-comp/empty/emptyNone'
import ModalComponent from '@/components/antd-comp/modal/ModalComponent'
import FouterPage from '@/components/fouter-page'
import CreateModal from '@/pages/CallWordPage/components/callDialog'
import CallTableHead from '@/pages/CallWordPage/components/tableHead'
import { useDictStore } from '@/store/dictStore'
import { useTable } from '@/util/hook'
import { useEffect, useState } from 'react'
import { callWordList } from '../../CallWordPage/API/index'
import '../css/callWordDia.less'
import '../css/diaCom.less'
import '../css/styles.css'
import CallWordDia_Cont from './CallWordDIa_Cont'

const CallWordDia = ({ open, setOpen, addCallWord }) => {
  /* 取消 */
  const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
    setOpen(false)
  }

  const [callWordDiaOpen, setCallWordDiaOpen] = useState(false)
  const [obj, setObj] = useState(null)
  /* 筛选 */
  const [searchName, setSearchName] = useState('')
  const [num, setNum] = useState('')
  /* tableList */
  const {
    page,
    pageSize,
    data: datalist,
    total,
    loading,
    setPage,
    search,
    reload
  } = useTable({}, param => callWordList(param.page, 12, searchName, num || ''), true)
  // 类型列表
  const [SearchList, setSearchList] = useState([])
  const [SearchListDialog, setSearchListDialog] = useState([])
  const { loadDictOptions } = useDictStore()
  const loadTypeList = (type = 'category') => {
    loadDictOptions(type).then((res: any) => {
      const list = [...res]
      setSearchListDialog(list)
      res.unshift({
        id: 0,
        label: '全部类型',
        value: 'all'
      })
      setSearchList(res)
      setNum(res[0].id)
    })
  }
  const linkToCreate = (path, type) => {
    window.open(path, '_blank', 'noreferrer')
  }
  /* 添加 */
  const diaEdit = () => {
    linkToCreate(`/callWord`, 'create')
    return
    /* 暂时取消新增弹窗形式显示新增数据 */
    setObj({})
    setCallWordDiaOpen(true)
  }
  /* 初始化类别列表 */
  useEffect(() => {
    //loadTypeList()
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    const _page = window.LibPage
    if (_page) {
      setPage(_page)
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      delete window.LibPage
    } else {
      setPage(1)
    }
  }, [])
  /* 提交 */
  const childSubmitData = () => {
    reload()
  }
  /* 搜索 */
  const seleCarFun = (e, id) => {
    setNum(e.id)
    search(e.id)
  }
  const SearchNameFun = e => {
    setSearchName(e)
    search(e)
  }

  return (
    <>
      <ModalComponent
        title={'导入提示词'}
        width={1200}
        className="modal_antcomp_case Application_DiaCont max-h-[50%]"
        style={{ top: '10%' }}
        open={open}
        footer={[]}
        content={
          <div className="caseOverFlowY relative" style={{ background: '#F5F7FB', height: '70vh' }}>
            {loading && (
              <div className="absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center bg-[rgba(255,255,255,0.6)] dark:bg-blur-shared">
                <span className="loading loading-infinity loading-lg"></span>
              </div>
            )}
            {/* 头部 */}
            <div className="flexRowStart Application_DiaCont_head">
              <CallTableHead
                num={num}
                SearchList={SearchList}
                seleCarFun={seleCarFun}
                diaEdit={diaEdit}
                setSearchName={SearchNameFun}
              ></CallTableHead>
            </div>
            <div style={{ height: '80%', maxHeight: '80%' }} className=" overflow-y-scroll scrollbar-hide">
              {/* 内容 */}
              {!loading && !datalist?.length ? (
                <ListEmptyNone style={{ background: '#F5F7FB' }} />
              ) : (
                <CallWordDia_Cont
                  datalist={datalist}
                  SearchList={SearchList}
                  addCallWord={addCallWord}
                ></CallWordDia_Cont>
              )}
            </div>
            {/* footer */}
            {!loading && datalist?.length > 0 && (
              <FouterPage
                page={page}
                pageSize={pageSize}
                total={total}
                setPage={newPage => setPage(newPage)}
              ></FouterPage>
            )}
            {/* 弹窗 */}
            {open ? (
              <CreateModal
                submitData={childSubmitData}
                datalist={SearchListDialog}
                open={callWordDiaOpen}
                setOpen={setCallWordDiaOpen}
                obj={obj}
              ></CreateModal>
            ) : null}
          </div>
        }
        onCancel={e => {
          handleCancel(e)
        }}
        onOk={() => {}}
      />
    </>
  )
}

export default CallWordDia
